<template>
  <h1>Hello Vue3</h1>
</template>

<script>
/*
  目标：体验 Vue3 组合式 API 的生命周期钩子的写法
  
  生命周期钩子小结：
    setup 创建实例前
    onBeforeMount 挂载DOM前
    onMounted 挂载DOM后
    onBeforeUpdate 更新组件前
    onUpdated 更新组件后
    onBeforeUnmount 卸载销毁前
    onUnmounted 卸载销毁后
*/
import { onMounted } from 'vue'
export default {
  name: 'App',
  setup() {
    // console.log(typeof onMounted)
    // 创建组件实例前，无法获取到 DOM 节点
    console.log(document.querySelector('h1'),111) // null

    // 为什么要变成函数调用的写法？
    onMounted(() => {
      console.log('组件挂载完毕后自动执行的钩子', 222)
      console.log(document.querySelector('h1')) // <h1></h1>
    })

    onMounted(() => {
      console.log('组件挂载完毕后自动执行的钩子', 333)
      console.log(document.querySelector('h1')) // <h1></h1>
    })
  },
}
</script>

<style></style>
